import { login } from '@/api/user'
import { setToken, getToken } from '@/utils/auth'
import { getUserInfo, getUserDetailById } from '@/api/user'
export default {
  // 开启模块命名空间 才算是严格的模块化管理
  // 访问 mutation actions函数的时候 ,都需要在前面加上模块名称才可以
  namespaced: true,
  // state: {
  //   name: 'cp'
  // },
  // 箭头函数
  // data(){return {响应式数据}} 复用的时候如果直接写成对象,由于引用类型的特性
  // 各个组件之间共享data中的数据,组件一个发生改变另一个也会收到影响
  // 改成函数return 对象之后 每一次组件复用的时候都会重新执行一下这个函数
  // 每次返回的都是一个全新的对象,也就是每一个复用的组件,都拥有一份自己独立的数据,互不影响
  // vuex中的模块也是可能进行复用的 为了复用的时候,互相不影响,采用同样的函数执行,return 对象的形式
  state: () => ({
    token: getToken() || '',
    userInfo: {}
  }),
  mutations: {
    // 获取koken
    SetToken(state, payload) {
      state.token = payload
      setToken(payload)
    },
    // 存储userInfo  用户资料
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }

  },
  actions: {
    asyncSetToken(ctx, data) {
      // 发送登录请求,获取token  然后调用mutation存入state
      // 修改一下 返回promise对象的方法
      // 基础原理:在promise链中,如果前一个.then方法中return 了 new Promise对象
      // 那么最后一个.then 的回调  会等到 newPromise对象状态发生变化之后才会执行
      return new Promise((reslove, reject) => {
        login(data).then(res => {
          ctx.commit('SetToken', res.data)
          console.log(res)
          reslove(res.data)
        })
      })
    },
    asyncsetUserInfo(ctx) {
      return new Promise((reslove, reject) => {
        getUserInfo().then(res => { // 获取用户资料
          getUserDetailById(res.data.userId).then(imgRes => { // 获取用户头像
            console.log(imgRes)
            ctx.commit('setUserInfo', { ...res.data, ...imgRes.data })// 合并对象  把头像和资料合并到一个对象中
            reslove()
          })
        })
      })
    }

  }
}

